/**
* mainHeading:全选对应的标题
* subheading:小灰框里面的标题
* show:控制是否显示全选那些按钮
**/
<template>
  <view class="view-details">
    <view class="border">
      <view class="title layout">
        <text class="project">{{ mainHeading }}</text>
        <van-checkbox v-model="isCheckAll" @change="changeAll" v-show="show">
          <template #icon="props">
            <img class="img-icon" :src="props.checked ? inactiveIcon : activeIcon"/>
          </template>
        </van-checkbox>
        <text :class="isCheckAll ? 'active' : ''" v-show="show">全选</text>
      </view>
      <view class="content-list" v-for="(item,index) in commonData" :key="index">
        <view class="distance">
          <view class="affirm layout">
            <img style="width: 22px;height: 22px;" src="../../../static/standardizedOperationImg/zxckBlue.png" alt="">
            <text>{{ item.title }}</text>
            <van-checkbox-group ref="checkboxGroup" v-model="CheckedAllArr" @change="handleChecked" v-show="show">
              <van-checkbox shape="square" :name="item.id">
                <template #icon="props">
                  <img class="img-icon" :src="props.checked ? inactiveIcon : activeIcon"/>
                </template>
              </van-checkbox>
            </van-checkbox-group>
          </view>
          <van-divider/>
          <view class="content">
            <text>
              {{ subheading }}：<br>
              {{ item.content }}
            </text>
          </view>
        </view>
      </view>
      <slot name="verity"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "viewDetails",
  props: ['mainHeading', 'commonData', 'subheading','show'],
  data() {
    return {
      CheckedAllArr: [],
      isCheckAll: false, // 是否全选
      activeIcon: require('../../../static/img/no-click.png'),
      inactiveIcon: require('../../../static/img/clicked.png'),
    }
  },
  methods: {
    //全选
    changeAll(val) {
      let checkedCount = this.CheckedAllArr.length
      if (val) {
        this.CheckedAllArr = this.commonData.map(item => item.id)
      } else {
        //取消全选
        if (checkedCount === this.commonData.length) {
          this.CheckedAllArr = []
        }
      }
    },
    //单选
    handleChecked() {
      this.isCheckAll = this.CheckedAllArr.length == this.commonData.length;
    },
  }
}
</script>

<style lang="scss" scoped>
.view-details {
  width: 100vw;
  background: #F2F6FA;

  .layout {
    display: flex;
    align-items: center;
  }

  text {
    font-size: px2vh(40);
    color: #666666;
    font-weight: bold;
  }

  .border {
    padding: px2vh(50) px2vw(40) px2vh(20);
  }

  .title {
    margin-bottom: px2vh(30);

    .project {
      flex: 1;
    }

    text:last-child {
      color: #98999B;
      margin-left: px2vw(10);
    }
  }

  .content-list {
    margin-bottom: px2vh(30);
    background: #FFFFFF;
    border-radius: px2vh(20);

    .distance {
      padding: px2vh(52) px2vw(50) px2vh(40);
    }

    .affirm {
      text {
        margin-right: auto;
        margin-left: px2vw(18);
      }
    }

    .content {
      width: px2vw(920);
      background: #F7F7F7;

      text {
        display: block;
        padding: px2vh(48);
        font-weight: normal;
        font-size: px2vh(38);
        line-height: px2vh(62);
      }
    }
  }
}

.img-icon {
  width: 13px;
  height: 13px;
}
.active{
  color: #417ADC !important;
}
</style>